/**
 * Created by Administrator on 2016/7/1.
 */
import React from 'react'
import {Link} from 'react-router-dom'
import {MemoryRouter} from 'react-router'
import PropTypes from 'prop-types'
import {List} from 'antd-mobile'
import '../assets/less/home.less'

/**
 * connect中间件
 * connect一定要写在需要传递参数的组件头部，因为这是语法规则，只对当前关联的组件生效，和java的原理是一致的
 * state用法：state => state（传递全部state）
 * dispatch用法：（单个action）bindActionCreators(navActions, dispatch)，（多个action）bindActionCreators({...action1, ...action2}, dispatch)
 */
export class Sidebar extends React.Component {
    constructor(props) {
        super(props);
        //构造函数用法
        //常用来绑定自定义函数，切记不要在这里或者组件的任何位置setState，state全部在reducer初始化，相信对开发的后期很有帮助
        //例子：this.myfunction = this.myfunction.bind(this)
        // this.handleClick = this.handleClick.bind(this)
        this.changeTitle = this.changeTitle.bind(this)
        this.changeRouter = this.changeRouter.bind(this)
    }

    changeTitle = async (id, title) => {
        // console.log(e.target)
        this.setState({title: title});
        if (id) {
            await this.props.getTheme(id)
        } else {
            this.props.history.push('/')
        }
        this.props.onOpenChange()
    }

    changeRouter = (id) => {
        this.props.history.push(`/news/${id}`)
        this.props.onOpenChange()
    }

    render() {
        const {themes} = this.props
        return (
            <div className="home-wrapper">
                <List>
                    {themes.others ? themes.others.map((item, index) => {
                        if (index === 0) {
                            return <List.Item
                                key={index}
                                multipleLine
                                onClick={() => this.changeTitle(null, '首页')}
                            >
                                首页
                            </List.Item>
                        }
                        return (<List.Item key={index} arrow="horizontal"
                        >
                            <div key={index} onClick={() => this.changeRouter(item.id)}>
                                {/*<Link to={`/news/${item.id}`}>*/}
                                    {item.id}
                                    {item.name}
                                {/*</Link>*/}
                            </div>
                        </List.Item>);
                    }) : ''}
                </List>
            </div>
        );
    }
}

Sidebar.propTypes = {
    themes: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired,
    getTheme: PropTypes.func.isRequired,
    onOpenChange: PropTypes.func.isRequired
}